<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <!-- 
        必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作
        是否可以删除 lay-allowClose="true"
        默认选项卡
       -->
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li>tab1</li>
          <!-- 指定高亮 -->
          <li class="layui-this">tab2</li>
          <li>tab3</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item">内容1</div>
          <!-- 指定当前显示的容器 -->
          <div class="layui-tab-item layui-show">内容2</div>
          <div class="layui-tab-item">内容3</div>
        </div>
      </div>

      <a href="#demoTab=333">切换到tab3</a>
      <!-- 简洁选项卡 -->
      <div class="layui-tab layui-tab-brief" lay-filter="demoTab">
        <ul class="layui-tab-title">
          <li lay-id="111">tab1</li>
          <li lay-id="222" class="layui-this">tab2</li>
          <li lay-id="333">tab3</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item">内容1</div>
          <div class="layui-tab-item layui-show">内容2</div>
          <div class="layui-tab-item">内容3</div>
        </div>
      </div>

      <!-- 卡片选项卡 -->
      <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
          <li>tab1</li>
          <li class="layui-this">tab2</li>
          <li>tab3</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item">内容1</div>
          <div class="layui-tab-item layui-show">内容2</div>
          <div class="layui-tab-item">内容3</div>
        </div>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use("element", function () {
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#demoTab=/, "");
        element.tabChange("demoTab", layid); //假设当前地址为：http://a.com#demoTab=333，那么选项卡会自动切换到“tab3”这一项

        //监听Tab切换，以改变地址hash值
        element.on("tab(demoTab)", function () {
          location.hash = "demoTab=" + this.getAttribute("lay-id");
        });

        // 动态新增tab
        element.tabAdd("demoTab", {
          title: "选项卡的标题",
          content: "选项卡的内容", //支持传入html
          id: "555",
        });
        // 动态删除tab
        element.tabDelete("demoTab", "555"); //删除 lay-id="xxx" 的这一项

        // 绑定自定义 Tab 元素 2.1.6+
        // //HTML
        // <ul id="tabHeader">
        //   <li>标题1</li>
        //   <li>标题2</li>
        //   <li>标题3</li>
        // </ul>
        // <div id="tabBody">
        //   <div class="xxx">内容1</div>
        //   <div class="xxx">内容2</div>
        //   <div class="xxx">内容4</div>
        // </div>

        // //JavaScript
        // element.tab({
        //   headerElem: '#tabHeader>li' //指定tab头元素项
        //   ,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
        // });

        // element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
        // element.render('nav','filter-id'); //重新对导航进行渲染。注：layui 2.1.6 版本新增

        // 更多信息参考 element 模块文档 https://www.layui.com/doc/modules/element.html
      });
    </script>
  </body>
</html>
